import React from 'react';
import { browserHistory } from 'react-router'

import button from '../img/material/button.png'
import dashed from '../img/address/dashed.png'
import {ROOTURL,ROOTAPI} from '../../publicAPI/publicAPI.js'
require('../css/FacialmaskAddress.css');
class FacialmaskAddress extends React.Component {
	constructor(props) {
	    super(props);
	    this.state = {
	        name:"",
            phone:"",
            address:"",
            changeaddr:false,
	    }
	}
	componentWillMount(){
       this.getUser()
	}
    componentDidMount(){
        
    }
    //获取地址
    getUser(){
        let _this=this
        let { id }=JSON.parse(localStorage.getItem("customerInfo"));
        let url = ROOTAPI + 'kabuy/shipaddress/instance.api?id='+id;
        fetch(url, {
                method : 'get',
                credentials: 'include',
            }).then(res=>{
                if(res.ok){
                    res.json().then(data=>{
                        console.log( JSON.stringify(data));
                        _this.setState({
                            name:data.cname,
                            phone:data.cphone,
                            address:data.fullAddr,
                            changeaddr:true
                        })
                    })
                }
        })
    }
    //新增或修改地址
    clickSave(){
        // 表单检测
        let {id}=JSON.parse(localStorage.getItem("customerInfo"));
        let url = ROOTAPI + 'kabuy/shipaddress/instance.api'; 
        this.state.changeaddr==true?
        fetch(url, {
                method : 'POST',
                credentials: 'include',
                body:JSON.stringify({
                    id:id,
                    customerId:id,
                    cname:this.state.name,
                    cphone:this.state.phone,
                    fullAddr:this.state.address
                })
            }).then(res=>{
                if(res.ok){
                    res.json().then(data=>{
                        browserHistory.push({pathname:`/user`,query:{}})
                    })
                }
        }):
        fetch(url, {
            method : 'POST',
            credentials: 'include',
            body:JSON.stringify({
                customerId:id,
                cname:this.state.name,
                cphone:this.state.phone,
                fullAddr:this.state.address
            })
        }).then(res=>{
            if(res.ok){
                res.json().then(data=>{
                    browserHistory.push({pathname:`/user`,query:{}})
                })
            }
        })
        
    }
    namechange(e){
        const name = e.target.value
        this.setState({
            name: name
        })
    }
    phonechange(e){
        const phone = e.target.value
        this.setState({
            phone: phone
        })
    }
    addrchange(e){
        const address = e.target.value
        this.setState({
            address: address
        })
    }

    render() {
        return (
            <div className="fm-address">
                <div className="fm-address-table">
                    <div className="fm-address-table-title">
                        收货地址
                    </div>
                    <div className="fm-address-table-name">
                        <div className="fm-address-table-name-word">真实姓名：</div>
                        <div className="fm-address-table-name-input"><input type="text" id="input_name" value={this.state.name} onChange={(e) => this.namechange(e)}/></div>
                        <div className="fm-address-table-name-dashed"><img src={dashed}/></div>
                    </div>
                    <div className="fm-address-table-phone">
                        <div className="fm-address-table-phone-word">手机号码：</div>
                        <div className="fm-address-table-phone-input"><input type="text" id="input_phone" value={this.state.phone} onChange={(e) => this.phonechange(e)}/></div>
                        <div className="fm-address-table-phone-dashed"><img src={dashed}/></div>
                    </div>
                    <div className="fm-address-table-address">
                        <div className="fm-address-table-address-word">收货地址：</div>
                        <div className="fm-address-table-address-input"><input type="text" id="input_address" placeholder="详细地址"  value={this.state.address} onChange={(e) => this.addrchange(e)}/></div>
                    </div>
                </div>
                <div className="fm-address-button-save" onClick={this.clickSave.bind(this)}>
                    保存
                </div>
            </div>
        )
    }
}


export default FacialmaskAddress;